<template>
    <view class="recycle-container">
        <!-- Header -->
        <view>
            <image 
              class="recycle-banner" 
              mode="widthFix" 
              src="/static/images/huishou_index_banner.jpg"
            />
        </view>
        
        <!-- Main -->
        <view class="recycle-main">
            <view class="recycle-title">回收流程</view>
            <view class="recycle-process">
                <view class="recycle-process-item">
                    <u-image width="100rpx" height="100rpx" shape="circle" src="/static/images/huishou_pinggu.png" />
                    <view class="recycle-process-name">在线评估</view>
                    <view class="recycle-process-tips">5秒出价</view>
                </view>
                <view class="recycle-process-item">
                    <u-image width="100rpx" height="100rpx" shape="circle" src="/static/images/huishou_jichu.png" />
                    <view class="recycle-process-name">寄出商品</view>
                    <view class="recycle-process-tips">灵活操作</view>
                </view>
                <view class="recycle-process-item">
                    <u-image width="100rpx" height="100rpx" shape="circle" src="/static/images/huishou_zhijian.png" />
                    <view class="recycle-process-name">专业质检</view>
                    <view class="recycle-process-tips">隐私保护</view>
                </view>
                <view class="recycle-process-item">
                    <u-image width="100rpx" height="100rpx" shape="circle" src="/static/images/huishou_shoukuan.png" />
                    <view class="recycle-process-name">极速收款</view>
                    <view class="recycle-process-tips">闪电到账</view>
                </view>
            </view>
        </view>
        
        <!-- Widget -->
        <view class="recycle-widget">
            <navigator 
              class="recycle-btn--assess" 
              hover-class="none" 
              url="/bundle/pages/recycle_form/recycle_form"
            >
                免费评估您手机值多少钱 
            </navigator>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

<style scoped>
    .recycle-banner {
        width: 100%;
    }
    
    .recycle-main {
       padding: 40rpx;
       margin-top: 20rpx;
       border-radius: 10px;
       background-color: #FFFFFF;
    }
    
    .recycle-title {
        padding-bottom: 50rpx;
        text-align: center;
        font-size: 36rpx;
        color: #000000;
    }
    
    .recycle-process {
        position: relative;
        display: flex;
        justify-content: space-between;
        height: 184rpx;
    }
    
    .recycle-process::before {
        content: '';
        position: absolute;
        top: 50rpx;
        left: 50rpx;
        right: 50rpx;
        display: block;
        border-top: 1rpx dashed #3187FD;
    }
    
    .recycle-process-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    
    .recycle-process-name {
        font-size: 28rpx;
        color: #333333;
    }
    
    .recycle-process-tips {
        padding: 4rpx 8rpx;
        font-size: 22rpx;
        color: #619EFE;
        background-color: #E8F6FF;
    }
    
    .recycle-widget {
        margin: 40rpx 30rpx 30rpx 30rpx;
    }
    
    .recycle-btn--assess {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88rpx;
        border-radius: 50px;
        font-size: 34rpx;
        color: #FFFFFF;
        background-image: linear-gradient(to left, #3187FD, #24A3FF);
    }
</style>
